var socket;
if (!("WebSocket" in window)) {
    alert("您的浏览器不支持WebSocket协议！");
} else {
    console.log("支持WebSocket");
    const userName = document.getElementById("loginedUserName").innerText;
    // socket = new WebSocket("ws://47.106.183.193:8888/ws?name=" + userName);
    socket = new WebSocket("ws://127.0.0.1:8888/ws?name=" + userName);

    socket.onmessage = function (event) {
        console.log("接收到的消息：" + event.data +" 消息的类型是：" + typeof event.data);
        const data =jQuery.parseJSON(event.data);
        console.log(data);
        let number;
        let newContent;
        let pattern;
        let html;
        switch (data.flag) {
            case "1": // flag位为1，表示是发送添加好友请求
                number = $("#request_number").text();
                // 更新请求数量
                $("#request_number").text(parseInt(number) + 1);
                html = document.getElementById("friend-requests").innerHTML;
                // 更新Vue实例中对应的值
                app.friendRequests.push(data);
                playAudio();
                break;
            case "2": // flag位为2，表示是同意添加好友请求
                // 表示接受好友添加请求，将消息显示在通知里
                number = $("#notification-number").text();
                $("#notification-number").text(parseInt(number) + 1);
                html = document.getElementById("notification-list").innerHTML;
                playAudio();
                // 更新Vue实例中对应的值
                app.notificationMessages.push(data);
                app.messages.push(data);
                break;
            case "3": // flag位为3，表示拒绝添加好友请求
                number = $("#notification-number").text();
                $("#notification-number").text(parseInt(number) + 1);
                html = document.getElementById("notification-list").innerHTML;
                // 更新Vue实例中对应的值
                app.notificationMessages.push(data);
                playAudio();
                break;
            case "4":
                // 表示聊天信息
                console.log("接到的消息是：----> " + data.content);
                console.log("data.A :" + data.A);
                // 更改消息通知的数量
                number = $("#chat-number").text();
                $("#chat-number").text(parseInt(number) + 1);
                let imgPath = data.aUserInfo.imagePath;
                console.log(imgPath);
                if (data.A === $("#chat-title").text()) {
                    // 如果收到的消息是现在和你聊天的人发的，那么接收并且显示
                    createChatEle(data, 0, imgPath);
                }
                createChatNotificationEle(data, imgPath);
                playAudio();
                break;
            case "5":
                // 表示好友状态更新消息，包括好友上线消息
                let who = data.A;
                $("#chat-users-large").children("li").each(function (index) {
                    let friendName = $(this).children(".author-thumb").children("p").text();
                    if (friendName === who) {
                        console.log("下标为：" + index + " status:");
                        console.log(data.aUserInfo);
                        $("#chat-status").removeClass();
                        // 表明找到了需要更新的用户
                        switch (data.aUserInfo.status) {

                            case 0:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith(' <span class="icon-status disconected"></span>');
                                $(this).children(".author-status").children(".status").text("离线");
                                $("#chat-status").addClass("icon-status disconected");
                                break;
                            case 1:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith('<span class="icon-status online"></span>');
                                $(this).children(".author-status").children(".status").text("在线");
                                $("#chat-status").addClass("icon-status online");
                                break;
                            case 2:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith('<span class="icon-status away"></span>');
                                $(this).children(".author-status").children(".status").text("离开");
                                $("#chat-status").addClass("icon-status away");
                                break;
                            case 3:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith('<span class="icon-status status-invisible"></span>');
                                $(this).children(".author-status").children(".status").text("隐身");
                                $("#chat-status").addClass("icon-status status-invisible");
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
                $("#chat-users-small").children("li").each(function (index) {
                    let friendName = $(this).children(".author-thumb").children("p").text();
                    if (friendName === who) {
                        // 表明找到了需要更新的用户
                        switch (data.aUserInfo.status) {
                            case 0:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith(' <span class="icon-status disconected"></span>');
                                break;
                            case 1:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith('<span class="icon-status online"></span>');
                                break;
                            case 2:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith('<span class="icon-status away"></span>');
                                break;
                            case 3:
                                $(this).children(".author-thumb").children("div").children(".icon-status")
                                    .replaceWith('<span class="icon-status status-invisible"></span>');
                                break;
                            default:
                                break;
                        }
                        return true;
                    }
                });
                break;
            case "6":
                number = $("#notification-number").text();
                $("#notification-number").text(parseInt(number) + 1);
                playAudio();
                // 更新通知
                app.notificationMessages.push(data);
                break;
            default:
                break;
        }
    };
    socket.onopen = function (e) {
        console.log("与服务器建立连接成功");
    };
    socket.onclose = function (e) {
        console.log("与服务器断开连接");
        console.log('websocket 断开: ' + e.code + ' ' + e.reason + ' ' + e.wasClean)
    };

}

function playAudio() {
    const player = $("#notification_tone")[0]; /*jquery对象转换成js对象*/
    if (player.paused){ /*如果已经暂停*/
        player.play(); /*播放*/
    }
}